<template>
	<view class="wrap-goods-list flex just-between">
		<block v-for="(numVal, index) in column" :key="numVal">
			<view class="cont-box" :id="`cont_${index + 1}`">
				<block v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
					<block v-if="item.type === 'goods'">
						<view class="item" @click="$jump.onGoodsDetail(item.id)">
							<view class="file">
								<image
									class="img"
									:src="$getImageURL(item.image)"
								/>

								<view class="distance-status flex align-center">
									<view class="status f-24 take" v-if="item.distribution_type == 1"> 自提 </view>

									<view class="distance f-24">{{ item.distance }}</view>
								</view>
							</view>

							<view class="goods-info">
								<view class="goods-name limit-num-line f-32">{{ item.title }}</view>

								<view class="goods-sign flex" v-if="item.blindlabel.length > 0">
									<block v-for="(sign, k) in item.blindlabel" :key="k">
										<view class="sign f-24">{{ sign.label.name }}</view>
									</block>
								</view>

								<view class="price-bg flex align-base">
									<view class="price flex align-base fBold">
										<view class="f-30">¥</view>
										<view class="f-38">{{ $filters.getPriceInt(item.price) }}</view>
										<view class="f-30">.{{ $filters.getPriceDecimal(item.price) }}</view>
									</view>
								</view>
							</view>
						</view>
					</block>

					<block v-else-if="item.type === 'shop'">
						<view class="item" @click="$jump.onStoreIndex(item.id)">
							<view class="file">
								<image
									class="img"
									:src="$getImageURL(item.avatar)"
								/>
							</view>

							<view class="shop-info">
								<view class="shop-name limit-num-line f-32">{{ item.shopname }}</view>

								<view class="address limit-num-line f-30">{{ item.address }}</view>
							</view>
						</view>
					</block>

					<block v-else-if="item.type === 'article'">
						<view class="item" @click="$jump.onArticleDetail(item.id)">
							<view class="file">
								<view class="video-img" v-if="item.article_type == 1">
									<image
										class="img"
										:src="$getImageURL(item.image)"
									/>
									
									<view class="play-bg flex align-center just-center">
										<image class="play" :src="$staticImagePath('article/play.png')" />
									</view>
								</view>

								<block v-else-if="item.article_type == 0">
									<image
										class="img"
										v-if="item.images.length > 0"
										:src="$getImageURL(item.images[0])"
									/>

									<image
										class="img-no"
										:src="$staticImagePath('common/default_goods.png')"
										v-else
									/>
								</block>
							</view>

							<view class="article-info">
								<view class="article-name limit-num-line f-32">{{ item.title }}</view>

								<view class="from-bg flex align-center">
									<block v-if="item.user_id === null || item.user_id == 0">
										<image class="icon" :src="$staticImagePath('home/logo.png')" />

										<view class="from limit-num-line f-30">{{ item.platform_prompt }}</view>
									</block>

									<block v-else>
										<image
											class="icon"
											:src="$getImageURL(item.is_shop == 1 ? item.shop.avatar : item.user.avatar)"
										/>

										<view class="from f-30">
											{{ item.is_shop == 1 ? item.shop.shopname : item.user.nickname }}
										</view>
									</block>
								</view>

								<view class="time-read flex align-center f-28">
									<view>{{ item.createtime_text2 }}</view>
									<view>{{ item.read }}阅读</view>
								</view>

								<image
									class="redbag"
									v-if="item.is_bonus == 1 && item.isReceive == 0"
									:src="$staticImagePath('home/redbag.png')"
								/>
							</view>
						</view>
					</block>
				</block>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 列表
			 */
			list: {
				type: Array,
				default: null,
			},
		},
		data() {
			return {
				count: 0,
				column: 2,
				flowData: {},
			};
		},
		created() {
			this.onCreate();
		},
		watch: {
			list: {
				handler(newVal, oldVal) {
					if (this.list.length <= 20) {
						this.count = 0;
						for (let i = 1; i <= this.column; i++) {
							this.$set(this.flowData, `column_${i}`, []);
						}
					}
					this.$nextTick(() => {
						this.initValue();
					});
				},
				immediate: true,
			},
		},
		methods: {
			onCreate() {
				this.flowData = {};
				for (let i = 1; i <= this.column; i++) {
					this.$set(this.flowData, `column_${i}`, []);
				}
			},

			/**
			 * 获取最小的对象
			 */
			getMinObject(list, type) {
				let m = list[0][type];
				let mo = list[0];
				for (let i = list.length - 1; i >= 0; i--) {
					if (list[i][type] < m) m = list[i][type];
				}
				mo = list.filter((i) => i[type] === m);
				return mo[0];
			},
			/**
			 * 计算每列的高度
			 */
			getMinColumnHeight() {
				return new Promise((resolve) => {
					const heightArr = [];
					for (let i = 1; i <= this.column; i++) {
						let query = uni.createSelectorQuery();
						query.in(this);
						query.select(`#cont_${i}`).boundingClientRect((res) => {
							heightArr.push({
								column: i,
								height: res.height,
							});
						});
						query.exec((res) => {
							if (this.column <= heightArr.length) {
								resolve(this.getMinObject(heightArr, "height"));
							}
						});
					}
				});
			},
			/**
			 * 初始化瀑布流数据
			 */
			async initValue() {
				if (this.count >= this.list.length) return false;
				const minHeightRes = await this.getMinColumnHeight();
				this.flowData[`column_${minHeightRes.column}`].push({
					...this.list[this.count],
					index: this.count,
				});
				this.count = this.count + 1;
				this.$nextTick(() => {
					this.initValue();
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-goods-list {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		overflow: hidden;

		.cont-box {
			width: 345rpx;
			height: fit-content;

			.item {
				width: 345rpx;
				background-color: white;
				border-radius: 16rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
				position: relative;

				.file {
					width: 100%;
					overflow: hidden;
					position: relative;
					
					.video-img {
						width: 100%;
						position: relative;
						
						.play-bg {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, 0.1);
							z-index: 2;
						
							.play {
								width: 80rpx;
								height: 80rpx;
							}
						}
					}

					.img {
						width: 100%;
						height: auto;
						aspect-ratio: 1;
					}
					
					.img-no {
						width: 100%;
						height: 0rpx;
					}

					.adv {
						position: absolute;
						top: 16rpx;
						right: 12rpx;
						background-color: rgba(0, 0, 0, 0.25);
						height: 23rpx;
						line-height: 23rpx;
						text-align: center;
						padding: 0 8rpx;
						box-sizing: border-box;
						color: #fbffff;
					}

					.distance-status {
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						height: 36rpx;
						width: fit-content;

						.status {
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							padding: 0 11rpx;
							color: white;
						}

						.take {
							background: linear-gradient(0deg, #fdd436, #ffbe35);
						}

						.team {
							background: linear-gradient(0deg, #dd551b, #f49355);
						}

						.distance {
							padding: 0 11rpx;
							background-color: rgba(0, 0, 0, 0.5);
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							color: white;
							border-top-right-radius: 10rpx;
						}
					}
				}

				.shop-info {
					width: 100%;
					padding: 22rpx 13rpx 25rpx;
					overflow: hidden;
					box-sizing: border-box;

					.shop-name {
						--limit-num: 2;
						margin-left: 3rpx;
						margin-right: 3rpx;
						color: #121212;
						line-height: 1.5em;
					}

					.address {
						--limit-num: 1;
						margin-top: 15rpx;
						color: #666666;
						line-height: 1.5em;
					}
				}

				.goods-info {
					width: 100%;
					padding: 22rpx 13rpx 25rpx;
					overflow: hidden;
					box-sizing: border-box;

					.goods-name {
						--limit-num: 2;
						margin-left: 3rpx;
						margin-right: 3rpx;
						color: #121212;
						line-height: 1.5em;
					}

					.goods-sign {
						margin-left: -7rpx;
						width: calc(100% + 14rpx);
						flex-wrap: wrap;

						.sign {
							margin-top: 14rpx;
							margin-left: 7rpx;
							height: 27rpx;
							line-height: 27rpx;
							text-align: center;
							padding: 0 7rpx;
							box-sizing: border-box;
							border-radius: 5rpx;
							overflow: hidden;
							border: 1rpx solid #ffffff;

							&:nth-child(2n) {
								background-color: #fef7f4;
								color: #f18f6d;
								border-color: #f6b99f;
							}
							&:nth-child(2n + 1) {
								background-color: #fefaf5;
								color: #f1b66d;
								border-color: #f7d6aa;
							}
						}
					}

					.price-bg {
						margin-top: 23rpx;
						width: 100%;
						overflow: hidden;
						gap: 13rpx;

						.price {
							color: #eb5c20;
						}

						.old-price {
							color: #888888;
							text-decoration: line-through;
						}
					}
				}

				.article-info {
					width: 100%;
					padding: 20rpx 23rpx;
					box-sizing: border-box;
					overflow: hidden;
					position: relative;

					.article-name {
						--limit-num: 2;
						color: #121212;
						line-height: 1.5em;
					}

					.from-bg {
						margin-top: 20rpx;
						gap: 8rpx;

						.icon {
							width: 42rpx;
							height: 42rpx;
							border-radius: 50%;
							overflow: hidden;
						}

						.from {
							--limit-num: 1;
							flex: 1;
							overflow: hidden;
							color: #888888;
						}
					}

					.time-read {
						margin-top: 18rpx;
						width: 100%;
						gap: 10rpx;
						color: #888888;
					}
				}

				.redbag {
					position: absolute;
					right: 12rpx;
					bottom: 15rpx;
					width: 72rpx;
					height: 72rpx;
				}
			}
		}
	}
</style>
